<template>
  <div
    :class="orderItem.select ? 'order-action-item' : 'order-item'"
    v-for="orderItem in orderArray"
    :key="orderItem.id"
    @click="handleOrderItem(orderItem)"
  >
    <div class="order-number-status">
      <div class="order-number">
        <p class="name">订单尾号：</p>
        <p class="number">{{ orderItem.sn }}</p>
      </div>
      <div class="image-status">
        <img
          v-if="orderItem.status == 1"
          src="../../../assets/images/order/ic_complete_status.png"
        />
        <img
          v-else-if="orderItem.status == 0"
          src="../../../assets/images/order/ic_wait_status.png"
        />
        <img v-else src="../../../assets/images/order/ic_exit_status.png" />

        <p v-if="orderItem.status == 1" class="status">已完成</p>
        <p
          v-else-if="orderItem.status == 0"
          class="status"
          style="color: #faad14"
        >
          待付款
        </p>
        <p
          v-else-if="orderItem.status == 3"
          class="status"
          style="color: #eb5e12"
        >
          整单退款
        </p>
        <p v-else class="status" style="color: #333333">部分退款</p>
      </div>
    </div>

    <div class="goods-image-number-layout">
      <div class="image-layout">
        <el-image
          v-for="goodsItem in getFirstFive(orderItem.item)"
          :key="goodsItem.id"
          :src="goodsItem.goods_image"
          fit="fill"
          :lazy="true"
          style="width: 46px; height: 46px; margin-right: 0.5vw"
        />
        <img
          v-if="orderItem.item.length >= 5"
          src="../../../assets/images/order/ic_more.png"
          style="width: 23px; height: 23px; margin: auto 0"
        />
      </div>
      <h1 class="number">
        共 <span style="color: #fd6013">{{ orderItem.item.length }}</span> 件
      </h1>
    </div>

    <div class="time-price-layout">
      <div class="time-layout">
        <p class="title">下单时间：</p>
        <p class="name">{{ timestampToTime(orderItem.createtime) }}</p>
      </div>
      <p class="price">
        <span v-if="orderItem.pay_type == 'vip'" class="vip_price">会员价</span>
        <span v-else> ￥ </span>
        <span :class="[orderItem.pay_type == 'vip' ? 'vip_txt' : '']">
          {{
            orderItem.pay_type == "vip"
              ? orderItem.vip_price
              : orderItem.order_amount
          }}
        </span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { OrderItems, GoodsItems } from "../../../api/order/type";
const $emit = defineEmits(["orderItemClick"]);
const orderArray = ref<OrderItems>([]);

/**
 * @订单条目的点击
 */
const handleOrderItem = (item: any) => {
  orderArray.value.forEach((element) => {
    element.select = false;
  });
  item.select = !item.select;
  $emit("orderItemClick", item);
};

/**
 * @设置订单数据
 */
const setOrderArray = (orderArr: OrderItems) => {
  for (let i = 0; i < orderArr.length; i++) {
    if (i == 0) {
      orderArr[i].select = true;
    } else {
      orderArr[i].select = false;
    }
  }
  orderArray.value = orderArr;
};

/**
 * @获取一个订单中前5个商品
 */
const getFirstFive = (collection: GoodsItems) => {
  const firstFive = collection.slice(0, 5);
  return firstFive.length < 5
    ? collection.slice(0, collection.length)
    : firstFive;
};

/**
 * @时间转换
 */
const timestampToTime = (timestamp: number) => {
  let date = new Date(timestamp * 1000);
  let Y = date.getFullYear() + "-";
  let M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
  let h =
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  let m =
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":";
  let s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
};

defineExpose({
  setOrderArray,
});
</script>

<style scoped lang="scss">
.vip_txt {
  color: #9b5219;
}

.order-item {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 0px 10px 10px 10px;
  padding: 15px 10px;
}

.order-action-item {
  display: flex;
  flex-direction: column;
  background-color: #eef2f5;
  border-radius: 7px;
  margin: 0px 10px 10px 10px;
  padding: 8px 10px;
}

.order-number-status {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .order-number {
    display: flex;
    flex-direction: row;

    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 11px;
      color: #999999;
    }

    .number {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 11px;
      color: #333333;
    }
  }

  .image-status {
    display: flex;
    flex-direction: row;
    align-items: center;

    img {
      width: 9px;
      height: 9px;
    }

    .status {
      font-family: PingFang SC, PingFang SC;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 11px;
      margin-left: 5px;
      color: #38b865;
    }
  }
}

.goods-image-number-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;

  .image-layout {
    display: flex;
    flex-direction: row;
  }

  .number {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}

.time-price-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 15px;

  .time-layout {
    display: flex;
    flex-direction: row;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;

    .title {
      color: #999;
      font-size: 11px;
    }

    .name {
      color: #333;
      font-size: 11px;
    }
  }

  .price {
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 14px;
    color: #333333;

    .vip_price {
      margin-right: 0.2vw;
      text-align: center;
      background: linear-gradient(91deg, #ecc187 0%, #f8e5c0 50%, #ecc187 100%);
      border-radius: 3px 3px 3px 3px;
      padding: 2px 4px;
      font-size: 12px;
      font-weight: bold;
      font-size: 8px;
      color: #9b5219;
    }
  }
}
</style>
